<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true">
          <el-form-item>
            <el-date-picker
              :picker-options="pickerOptions"
              v-model="form.date"
              @change="dateChangebirthday1"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="供应商" prop="OrderStatus">
            <el-select v-model="form.SupplierId" filterable placeholder="请选择供应商">
              <el-option
                v-for="item in SupplierList"
                :key="item.SupplierId"
                :label="item.SupplierName"
                :value="item.SupplierId"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="仓库" prop="OrderStatus">
            <el-select v-model="form.OrderStatus" filterable placeholder="请选择单据状态">
              <el-option
                v-for="item in SKUSaleModeList"
                :key="item.OrderStatus"
                :label="item.OrderStatusName"
                :value="item.OrderStatus"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="GetPurchaseOrdersDetailList()">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 表格 -->
      <el-table :data="List" border height="750px" :header-cell-style="{'background':'#F5F7FA','color':'#000',}">
        <el-table-column prop="SupplierName" label="供应商" align="center"></el-table-column>
        <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="Unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="Qty" label="数量" align="center"></el-table-column>
        <el-table-column prop="Price" label="金额" align="center">
           <template slot-scope="scope">
           <span>{{scope.row.Price.toFixed(2)}}</span>
         </template>
        </el-table-column>
        <!-- <el-table-column prop="DiscountRate" label="折扣率" align="center"></el-table-column> -->
        <el-table-column prop="DiscountMoney" label="折扣额" align="center">
           <template slot-scope="scope">
           <span>{{scope.row.DiscountMoney.toFixed(2)}}</span>
         </template>
        </el-table-column>
        <el-table-column prop="ADMoney" label="折后金额" align="center">
           <template slot-scope="scope">
           <span>{{scope.row.ADMoney.toFixed(2)}}</span>
         </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          layout=" prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="PageSize"
          :total="total"
          style="float:right;margin-top: 10px;"
        ></el-pagination>
      </div>
      <!-- 编辑 -->
      <!-- <el-dialog title="商品列表" :visible.sync="editFormVisible">
        <el-table
          :data="skulist"
          ref="multipleTable"
          border
          style="width: 100%; margin-top: 20px"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
        >
          <el-table-column type="selection" width="55" :reserve-selection="judge"></el-table-column>
          <el-table-column prop="ProductId" label="商品ID" align="center"></el-table-column>
          <el-table-column prop="SKUName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="SKUUnitNo" label="单位" align="center"></el-table-column>
          <el-table-column prop="SKUInPrice" sortable label="进价" align="center"></el-table-column>
        </el-table>
        <span slot="footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
          <el-button type="primary" @click.native="addSubmit()">确 定</el-button>
        </span>
       
      </el-dialog>-->
    </section>
  </div>
</template>

<script>
import { GePurchaseDetails ,PurchaseGetSupplierList} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },

        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const end = new Date();
              console.log(this);
              console.log(formatDate);
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              var weekStartDate = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek
              );
              const start = weekStartDate;
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              const start = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek - 7
              );
              start.setTime(start);
              const end = new Date(
                nowYear,
                nowMonth,
                nowDay - nowDayOfWeek - 1
              );
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              const end = new Date();
              const start = new Date(nowYear, nowMonth, 1);
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              var now = new Date(); //当前日期
              var nowDayOfWeek = now.getDay(); //今天本周的第几天
              var nowDay = now.getDate(); //当前日
              var nowMonth = now.getMonth(); //当前月
              var nowYear = now.getYear(); //当前年
              nowYear += nowYear < 2000 ? 1900 : 0; //
              var lastMonthDate = new Date(); //上月日期
              lastMonthDate.setDate(1);
              lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
              var lastYear = lastMonthDate.getYear();
              var lastMonth = lastMonthDate.getMonth();
              //								const end = new Date();
              const start = new Date(nowYear, nowMonth - 1, 1);
              start.setTime(start);
              const end = new Date(
                nowYear,
                nowMonth - 1,
                getMonthDays(lastMonth)
              );
              start.setTime(start);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近5天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 5);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近10天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 10);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      SupplierList: [],
      Page: 1,
      PageSize: 100,
      total: 0,
      List: [],
      form: {
        date: []
      }
    };
  },
  created() {
    this.PurchaseGetSupplierList();
    this.getTime();
  },
  methods: {
    //获取供应商列表
    PurchaseGetSupplierList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: 20000
      };
      PurchaseGetSupplierList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取供应商列表", vdata);
          var list = vdata.DataList;
          self.SupplierList = list;
        }
      });
    },
    getTime() {
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let dt = date.getDate() - 1;
      let endTime = y + "-" + m + "-" + d;
      let starttime = y + "-" + m + "-" + dt;
      this.form.date[0] = starttime;
      this.form.date[1] = endTime;
      this.GePurchaseDetails();
    },
    dateChangebirthday1(val) {
      this.startTime = val;
      console.log(this.startTime);
    },
    GePurchaseDetails() {
      var parm = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.Page,
        PageSize: this.PageSize,
        SupplierId: 45,
        StartDate: this.form.date[0],
        EndDate: this.form.date[1],
        SupplierId: this.form.SupplierId
      };
      GePurchaseDetails(parm).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取采购订单表体列表");
          console.log(vdata);
          this.List = vdata.DataList;
          this.total = vdata.TotalCount;
        }
      });
    },
    //翻页
    handleCurrentChange(val) {
      this.Page = val;
      this.GePurchaseDetails();
    },
    GetPurchaseOrdersDetailList() {
      this.GePurchaseDetails();
    }
  }
};
</script>
